<template>
  <div>
    <template v-if="markList.length">
      <div
        v-for="item in markList"
        :key="item.pyDfdId"
        v-show="item.pyDtkqtId == props.pyDtkqtId"
        class="opacity-70 font-semibold text-[30px] absolute leading-5"
        :style="{
          left: item.x + 'px',
          top: item.y + 'px',
          transform: `scale(${1 / scale})`,
          transition: '0.3s',
          transformOrigin: '0 0',
        }"
      >
        <a-dropdown :trigger="['click']">
          <div style="color: #f00">
            <div v-if="item.type == '1'">
              <CheckOutlined />
            </div>
            <div v-if="item.type == '2'">
              <CloseOutlined />
            </div>
            <div v-if="item.type == '3'">
              <QuestionOutlined />
            </div>
            <div class="px-2 py-1 font-normal text-[25px] w-[200px]" v-if="item.type == '4'">
              {{ item.value }}
            </div>
          </div>
          <template #overlay>
            <a-menu @click="clickStepItem(item)">
              <a-menu-item key="1"> 移除标注 </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  // 拖拽的元素列表
  markList: {
    type: Array,
    default: () => [],
  },
  rotate: {
    type: Number,
    default: 0,
  },
  scale: {
    type: Number,
    default: 1,
  },
  pyDtkqtId: {
    type: [Number, String],
    default: 0,
  },
} as any)

const emit = defineEmits(['removeMarkItem'])

const clickStepItem = (value: any) => {
  emit('removeMarkItem', value.pyDfdId)
}
</script>

<style scoped></style>
